<template>
  <a-card class="content" :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row>
          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-input allowClear v-model="searchForm.orderNo" placeholder="请输入订单编号" />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-select v-model="searchForm.status" placeholder="请选择订单状态" allowClear>
                <a-select-option
                  v-for="item in selectData"
                  :key="item.status"
                  :value="item.status"
                >{{item.text}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-button type="primary" icon="search" @click="search()">查找</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-form layout="inline">
        <a-row>
          <a-col :md="8" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-range-picker v-decorator="['range-picker']" />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-select placeholder="待出库">
                <a-select-option
                  v-for="(item,index) in selectData"
                  :key="index"
                  :value="index"
                >{{item.text}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-button type="primary" icon="download" :loading="loading1" @click="loading1=true">导出</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="orderColumns"
      :dataSource="loadData"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :scroll="{x:1300}"
      class="orderlist"
    >
      <span slot="status" slot-scope="text">
        <a-tag color="blue" v-if="text === 90">已取消(系统)</a-tag>
        <a-tag color="blue" v-if="text === 80">已取消</a-tag>
        <a-tag color="blue" v-if="text === 70">已退款</a-tag>
        <a-tag color="blue" v-if="text === 60">退款中</a-tag>
        <a-tag color="blue" v-if="text === 50">已完成</a-tag>
        <a-tag color="blue" v-if="text === 40">待评价</a-tag>
        <a-tag color="blue" v-if="text === 30">待收货</a-tag>
        <a-tag color="blue" v-if="text === 20">待出库</a-tag>
      </span>
      <span slot="payChannel" slot-scope="text">
        <a-tag color="blue" v-if="text === undefined">未支付</a-tag>
        <a-tag color="blue" v-if="text === 'WX'">微信支付</a-tag>
        <a-tag color="blue" v-if="text === 'OFFLINE'">线下支付</a-tag>
      </span>
      <span slot="skuTotalPrice" slot-scope="text">￥{{ text / 100.0 }}</span>
      <span slot="shipCode" slot-scope="text">
        <a-tag color="blue" v-if="text === undefined">未发货</a-tag>
        <a-tag color="blue" v-if="text === 'SF'">顺丰速运</a-tag>
        <a-tag color="blue" v-if="text === 'YZ'">邮政</a-tag>
        <a-tag color="blue" v-if="text === 'YZPY'">邮政快递包裹</a-tag>
        <a-tag color="blue" v-if="text === 'ZTO'">中通</a-tag>
        <a-tag color="blue" v-if="text === 'JD'">京东快递</a-tag>
        <a-tag color="blue" v-if="text === 'YTO'">圆通速递</a-tag>
        <a-tag color="blue" v-if="text === 'HHTT'">天天快递</a-tag>
        <a-tag color="blue" v-if="text === 'DBL'">德邦快递</a-tag>
        <a-tag color="blue" v-if="text === 'HTKY'">百世快递</a-tag>
        <a-tag color="blue" v-if="text === 'STO'">申通快递</a-tag>
        <a-tag color="blue" v-if="text === 'YD'">韵达快递</a-tag>
        <a-tag color="blue" v-if="text === 'UC'">优速快递</a-tag>
        <a-tag color="blue" v-if="text === 'ZJS'">宅急送</a-tag>
        <a-tag color="blue" v-if="text === 'TNT'">TNT快递</a-tag>
        <a-tag color="blue" v-if="text === 'EMS'">EMS快递</a-tag>
      </span>
      <span slot="gmtCreate" slot-scope="text">{{ text | formDate }}</span>

      <span slot="action" slot-scope="text, record">
        <template v-if="show===20">
          <a-button type="primary" class="flyray-btn" @click="detail(record)">详情</a-button>
          <a-button type="primary" class="flyray-btn" style="margin:0 5px 0 5px;" @click="peisong(record)">配送单</a-button>
          <a-button type="primary" class="flyray-btn" @click="delivery(record)">发货</a-button>
        </template>
        <template v-else-if="show===60">
          <a-button type="primary" class="flyray-btn" @click="detail(record)">详情</a-button>
          <a-button type="primary" @click="refund(record)" style="margin:0 5px 0 5px;">退款</a-button>
        </template>
        <template v-else>
          <a-button type="primary" class="flyray-btn" @click="detail(record)">详情</a-button>
        </template>
      </span>
    </a-table>
    <!-- 订单 -->
    <a-modal
      title="订单详情"
      centered
      v-model="indentModalVisible"
      :footer="null"
      width="700px"
      wrapClassName="myModel"
      rowKey="id"
    >
      <p>
        <span class="subtitle">订单编号</span>
        {{ orderDetail.orderNo }}
      </p>
      <p>
        <span class="subtitle">用户id</span>
        {{ orderDetail.userId }}
      </p>
      <p>
        <span class="subtitle">订单渠道</span>
        {{ orderDetail.channel }}
      </p>
      <p>
        <span class="subtitle">订单状态</span>
        <span slot="orderDetail.status">
          <a-tag color="blue" v-if="orderDetail.status === 90">已取消(系统)</a-tag>
          <a-tag color="blue" v-if="orderDetail.status === 80">已取消</a-tag>
          <a-tag color="blue" v-if="orderDetail.status === 70">已退款</a-tag>
          <a-tag color="blue" v-if="orderDetail.status === 60">退款中</a-tag>
          <a-tag color="blue" v-if="orderDetail.status === 50">已完成</a-tag>
          <a-tag color="blue" v-if="orderDetail.status === 40">待评价</a-tag>
          <a-tag color="blue" v-if="orderDetail.status === 30">待收货</a-tag>
          <a-tag color="blue" v-if="orderDetail.status === 20">待出库</a-tag>
        </span>
      </p>
      <p>
        <span class="subtitle">支付渠道</span>
        <span slot="orderDetail.payChannel">
          <a-tag color="blue" v-if="orderDetail.payChannel === undefined">未支付</a-tag>
          <a-tag color="blue" v-if="orderDetail.payChannel === 'WX'">微信支付</a-tag>
          <a-tag color="blue" v-if="orderDetail.payChannel === 'OFFLINE'">线下支付</a-tag>
        </span>
      </p>
      <p>
        <span class="subtitle">用户留言</span>
        {{orderDetail.mono}}
      </p>
      <p>
        <span class="subtitle">收货信息</span>
        (收货人) &nbsp; {{ orderDetail.consignee }} &nbsp; (手机号) &nbsp; {{ orderDetail.phone }} &nbsp;
        （地址）&nbsp; {{ orderDetail.province }}{{ orderDetail.city }}{{ orderDetail.county }}{{ orderDetail.address }}
      </p>
      <p>
        <span class="subtitle">商品信息</span>
      </p>
      <a-table :columns="tableColumns" :dataSource="tableData" :pagination="false" bordered>
         <span slot="price" slot-scope="text">{{text/100.0}}</span>
      </a-table>
    </a-modal>
    <!-- 发货 -->
    <a-modal
      title="发货"
      v-model="shipmentsModalVisible"
      :footer="null"
      width="700px"
      rowKey="id"
      wrapClassName="myModel deliveryModel"
      destroyOnClose
    >
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          label="快递公司"
          rowKey="id"
          :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
          :wrapperCol="{ lg: { span: 8 }, sm: { span: 8 } }"
        >
          <a-select
            name="shipCode"
            v-decorator="['shipCode',{initialValue:shipCode1,rules:[{required:true,message: '请选择快递公司'}]}]"
          >
            <a-select-option
              v-for="item in deliveryData"
              rowKey="id"
              :key="item.shipCode"
              :value="item.shipCode"
            >{{item.text}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="快递编号"
          rowKey="id"
          :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input name="shipNo" v-decorator="['shipNo']" autocomplete="off"></a-input>
        </a-form-item>
        <div class="mybutton">
          <a-button class="cancelMymodel" @click="shipmentsModalVisible=false" style="margin-right:10px;">取消</a-button>
          <a-button html-type="submit" type="primary">确定</a-button>
        </div>
      </a-form>
    </a-modal>
    <!-- 退款 -->
    <a-modal
      title="退款"
      v-model="refundModalVisible"
      :footer="null"
      width="700px"
      wrapClassName="myModel deliveryModel"
    >
      <a-form @submit="refundSure" :form="form1">
        <a-form-item
          label="tips"
          :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >允许退款后钱会退回对方账户，请确认您已经收到退货</a-form-item>
        <a-form-item
          label="操作"
          :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-radio-group v-decorator="['type']">
            <a-radio value="0">拒绝退款</a-radio>
            <a-radio value="1">允许退款</a-radio>
          </a-radio-group>
        </a-form-item>
        <div class="mybutton">
          <a-button class="cancelMymodel" @click="refundModalVisible=false" style="margin-right:10px;">取消</a-button>
          <a-button html-type="submit" type="primary">确定</a-button>
        </div>
      </a-form>
    </a-modal>
  </a-card>
</template>
<script>
import { getgroupList,detail,handleSubmit } from '@/api/mall/order'
import { orderColumns,tableColumns } from '@/const/crud/mall/order.config'
export default {
  components: {
  },
  data() {
    return {
      form: this.$form.createForm(this),
      form1: this.$form.createForm(this),
      loading1: false,
      loading: true,
      advanced: false,
      orderColumns,
      tableColumns,
      refundModalVisible: false,
      indentModalVisible: false,
      shipmentsModalVisible: false,
      parameter: {
        pageSize: 10,
        orderNo: null,
        pageNo: 1,
        status: undefined,
        orderId: null
      },
      searchForm: {
        orderNo: null,
        status: undefined
      },
      pagination: {
        total: 0,
        pageSize: 10,
        showSizeChanger: true,
        showTotal: total => `共有${total}条`
      },
      tableData: [
        {
          spuTitle: '',
          title: '',
          num: null,
          unit: '',
          price: null,
          shipCode: ''
        }
      ],
      orderDetail: {
        orderNo: null,
        userId: null,
        channel: '',
        status: null,
        payChannel: '',
        consignee: '',
        province: '',
        city: '',
        county: '',
        address: ''
      },
      selectData: [
        { text: '未付款', status: 10 },
        { text: '正在拼团', status: 12 },
        { text: '待出库', status: 20 },
        { text: '待收货', status: 30 },
        { text: '待评价', status: 40 },
        { text: '已完成', status: 50 },
        { text: '退款中', status: 60 },
        { text: '已退款', status: 70 },
        { text: '已取消', status: 80 },
        { text: '已取消(系统)', status: 90 }
      ],
      deliveryData: [
        { text: '无需物流公司', shipCode: 'NONE' },
        { text: '顺丰速运', shipCode: 'SF' },
        { text: '百世快递', shipCode: 'HTKY' },
        { text: '中通快递', shipCode: 'ZTO' },
        { text: '申通快递', shipCode: 'STO' },
        { text: '圆通快递', shipCode: 'YTO' },
        { text: '韵达快递', shipCode: 'YD' },
        { text: '邮政快递包裹', shipCode: 'YZ' },
        { text: 'EMS', shipCode: 'EMS' },
        { text: '天天快递', shipCode: 'HHTT' },
        { text: '京东快递', shipCode: 'JD' },
        { text: '优速快递', shipCode: 'UC' },
        { text: '德邦快递', shipCode: 'DBL' },
        { text: '宅急送', shipCode: 'ZJS' },
        { text: 'TNT快递', shipCode: 'TNT' }
      ],
      loadData: [],
      deliveryOrderNo: null,
      refundOrderNo: null,
      show: null,
      shipCode1: 'NONE',
    }
  },
  filters: {
    
  },
  methods: {
    getData() {
      getgroupList(Object.assign(this.parameter)).then(res => {
        console.log(res)
        this.loadData = res.data.items
        this.loading = false
        this.pagination.total = res.data.total
      })
    },
    handleTableChange(pagination) {
      // console.log(pagination)
      this.parameter.pageNo = pagination.current
      this.parameter.pageSize = pagination.pageSize
      // console.log(this.parameter)
      this.getData()
    },
    //详情
    detail(val) {
      this.indentModalVisible = true;
      // console.log(val)
      this.orderDetail = val;
      this.parameter.orderId = val.id;
        detail(Object.assign(this.parameter)).then(response => {
          console.log(response)
          // this.orderDetail = response.data
          // this.tableData = response.data
        })
    },
    search() {
      this.parameter.pageNo = 1
      this.parameter.orderNo = this.searchForm.orderNo
      this.parameter.status = this.searchForm.status
      if (this.searchForm.status == 20) {
        this.show = 20
      } else if (this.searchForm.status == 60) {
        this.show = 60
      } else {
        this.show = 10
      }
      // console.log(this.parameter.orderNo)
      // console.log(this.parameter.status)
      this.getData()
    },
    // 发货
    delivery(val) {
      this.shipmentsModalVisible = true
      // console.log(val)
      this.deliveryOrderNo = val.orderNo
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form
        .validateFields()
        .then(values => {
          this.parameter.shipNo = values.shipNo
          this.parameter.orderNo = this.deliveryOrderNo
          this.parameter.shipCode = values.shipCode
          // console.log(values)
          this.shipmentsModalVisible = false
          handleSubmit(Object.assign(this.parameter)).then(res => {
              // console.log(res)
              this.$notification.success({
                description: '确认发货成功',
                message: '成功'
              })
              this.parameter.status = 20
              this.getData()
            })
          this.form.resetFields()
        })
        .catch((err, values) => {
          // console.log(err, values)
        })
    },
    peisong(val) {
      this.parameter.orderId = val.id;
       peisong(Object.assign(this.parameter)).then(res => {
          // console.log(res)
          let blob = new Blob([res], {
            type: 'application/vnd.ms-excel;charset=UTF-8'
          })
          let objectUrl = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          a.href = objectUrl
          a.download = '订单信息'
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          window.URL.revokeObjectURL(blob)
        })
    },
    //退款
    refund(val) {
      this.refundModalVisible = true
      this.refundOrderNo = val.orderNo
    },
    // 
    refundSure(e) {
      e.preventDefault()
      this.form1
        .validateFields()
        .then(values => {
          // console.log(values)
          this.parameter.type = values.type
          this.refundModalVisible = false
          refundSure(Object.assign(this.parameter)).then(res => {
              // console.log(res)
              if (res.errno === 200) {
                this.$notification.success({
                  description: '修改退款成功',
                  message: '成功'
                })
              } else {
                this.$notification.error({
                  description: res.errmsg,
                  message: '失败'
                })
                this.$message.error(res.errmsg + '  异常代码 : ' + res.errno)
              }
              this.parameter.status = 60
              this.getData()
            })
          this.form1.resetFields()
        })
        .catch((err, values) => {
          // console.log(err, values)
        })
    }
  },
  created() {
    this.getData()
  }
}
</script>
<style lang="less" scoped>

.flyray-btn{
  font-size:12px;padding:0 7px;margin:0 0 0 3px;height:24px;
}
.table-danger,
.table-danger:focus {
  color: #fff;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
}
.ant-modal-confirm {
  top: 35%;
}
.myModel {
  .ant-modal-content {
    margin-top: 15px;
    .ant-modal-header {
      padding: 20px 20px 10px;
      border: none;
      .ant-modal-title {
        line-height: 24px;
        font-size: 18px;
      }
    }
    .ant-modal-body {
      padding: 30px 20px;
      color: #606266;
      p {
        margin-bottom: 22px;
        line-height: 36px;
        .subtitle {
          padding: 0 12px 0 0;
          font-weight: 700;
        }
      }
      .ant-table-body {
        thead {
          tr {
            th {
              background-color: #fff;
              div {
                color: #909399;
                font-size: 12px;
                font-weight: 700;
              }
            }
          }
        }
        tr {
          th,
          td {
            div {
              padding: 0 10px;
            }
          }
        }
      }
    }
  }
}
.mybutton {
  padding: 10px 30px 10px;
  text-align: right;
}
.deliveryModel {
  .ant-modal-footer {
    border: none;
  }
  .ant-form-item-label {
    margin-right: 40px;
    label {
      font-weight: 700;
      color: #606366;
      width: 150px;
      &::after {
        content: '';
      }
    }
  }
  .ant-input {
    height: 36px;
  }
  td:last-child {
    padding: 0;
  }
}

</style>
